<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单页面应用</title>
    <style>
        body{
            /* 隐藏滚动条 */
            scrollbar-width:none;
            overflow: hidden;
        }

        #d1{
            position: sticky;
            top:5px;
            height: 40px;
            background-color: red;
            text-align: center;
            
        }
        #d1 a{
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- SAP（single page web application）的意思是单页Web应用，正如前言所说
    ，一般来说功能较为复杂都会涉及到页面跳转的功能，而传统的前端页面跳转往往是利用<a/>标签进行跳转，
    这种方式虽然可以实现功能，但是每次跳转到新的页面都会重新对页面的元素进行加载，
    这样其实对于用户来说是不太友好的。而单页Web应用则较好的解决了这个问题，
    因为SAP整个应用都是在一个页面上进行的，每次的页面跳转只涉及到页面中对应组件（模块）的更新操作，
    这样就在一定程度上让页面不需要加载重复的页面元素。 -->



    <div id="d1">
        <a href="#a1">我是第1个页面</a>
        <a href="#a2">我是第2个页面</a>
        <a href="#a3">我是第3个页面</a>
    </div>
    <p>我是第1个p标签
        <a href="" name="a1"></a>
    </p>
    <p>我是第2个p标签</p>
    <p>我是第3个p标签</p>
    <p>我是第4个p标签</p>
    <p>我是第5个p标签</p>
    <p>我是第6个p标签</p>
    <p>我是第7个p标签</p>
    <p>我是第8个p标签</p>
    <p>我是第9个p标签</p>
    <p>我是第10个p标签</p>
    <p>我是第11个p标签</p>
    <p>我是第12个p标签</p>
    <p>我是第13个p标签</p>
    <p>我是第14个p标签</p>
    <p>我是第15个p标签</p>
    <p>我是第16个p标签</p>
    <p>我是第17个p标签</p>
    <p>我是第18个p标签</p>
    <p>我是第19个p标签</p>
    <p>我是第20个p标签</p>
    <p>我是第21个p标签</p>
    <p>我是第22个p标签</p>
    <p>我是第23个p标签</p>
    <p>我是第24个p标签</p>
    <p>我是第25个p标签</p>
    <p>我是第26个p标签</p>
    <p>我是第27个p标签</p>
    <p>我是第28个p标签</p>
    <p>我是第29个p标签</p>
    <p>我是第30个p标签
        <a href="" name="a2"></a>

    </p>
    <p>我是第31个p标签</p>
    <p>我是第32个p标签</p>
    <p>我是第33个p标签</p>
    <p>我是第34个p标签</p>
    <p>我是第35个p标签</p>
    <p>我是第36个p标签</p>
    <p>我是第37个p标签</p>
    <p>我是第38个p标签</p>
    <p>我是第39个p标签</p>
    <p>我是第40个p标签</p>
    <p>我是第41个p标签</p>
    <p>我是第42个p标签</p>
    <p>我是第43个p标签</p>
    <p>我是第44个p标签</p>
    <p>我是第45个p标签</p>
    <p>我是第46个p标签</p>
    <p>我是第47个p标签</p>
    <p>我是第48个p标签</p>
    <p>我是第49个p标签</p>
    <p>我是第50个p标签</p>
    <p>我是第51个p标签</p>
    <p>我是第52个p标签</p>
    <p>我是第53个p标签</p>
    <p>我是第54个p标签</p>
    <p>我是第55个p标签</p>
    <p>我是第56个p标签</p>
    <p>我是第57个p标签</p>
    <p>我是第58个p标签</p>
    <p>我是第59个p标签</p>
    <p>我是第60个p标签</p>
    <p>我是第61个p标签</p>
    <p>我是第62个p标签</p>
    <p>我是第63个p标签</p>
    <p>我是第64个p标签</p>
    <p>我是第65个p标签</p>
    <p>我是第66个p标签</p>
    <p>我是第67个p标签</p>
    <p>我是第68个p标签</p>
    <p>我是第69个p标签</p>
    <p>我是第70个p标签
        <a href="" name="a3"></a>
    </p>
    <p>我是第71个p标签</p>
    <p>我是第72个p标签</p>
    <p>我是第73个p标签</p>
    <p>我是第74个p标签</p>
    <p>我是第75个p标签</p>
    <p>我是第76个p标签</p>
    <p>我是第77个p标签</p>
    <p>我是第78个p标签</p>
    <p>我是第79个p标签</p>
    <p>我是第80个p标签</p>
    <p>我是第81个p标签</p>
    <p>我是第82个p标签</p>
    <p>我是第83个p标签</p>
    <p>我是第84个p标签</p>
    <p>我是第85个p标签</p>
    <p>我是第86个p标签</p>
    <p>我是第87个p标签</p>
    <p>我是第88个p标签</p>
    <p>我是第89个p标签</p>
    <p>我是第90个p标签</p>
    <p>我是第91个p标签</p>
    <p>我是第92个p标签</p>
    <p>我是第93个p标签</p>
    <p>我是第94个p标签</p>
    <p>我是第95个p标签</p>
    <p>我是第96个p标签</p>
    <p>我是第97个p标签</p>
    <p>我是第98个p标签</p>
    <p>我是第99个p标签</p>
    <p>我是第100个p标签</p>
</body>
</html>